import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

// 该段代码不需要记，理解即可
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch((err) => err);
};
// 引入路由权限接口请求函数
import { pressApi } from '@/utils/https'
// 引入store 实例对象，来操作对应的store 上的方法
import store from '@/store'
const routes = [
    { path: '/', redirect: '/layout' },
    {
        path: '/layout',
        component: () => import('@/views/layout/Layout.vue'),
        children: [
            {
                path: '',
                component: () => import('@/views/layout/home/Home.vue'),
                meta: {
                    title: "首页",
                    icon: 'el-icon-platform-eleme'
                },
                name: 'Home'
            },
            {
                path: 'user',
                component: () => import('@/views/layout/user/User.vue'),
                meta: {
                    title: "用户管理",
                    icon: 'el-icon-user-solid'
                },
                name: 'User'
            },
            {
                path: 'info',
                component: () => import('@/views/layout/info/Infomanage.vue'),
                meta: {
                    title: "信息管理",
                    icon: 'el-icon-star-on'
                },
                name: 'Info',
                children: [
                    {
                        path: '',
                        component: () => import('@/views/layout/info/Myinfo.vue'),
                        meta: {
                            title: "个人信息",
                            icon: 'el-icon-question'
                        },
                        name: 'Myinfo',
                    }
                ]
            }
        ]
    }, //首页
    { path: '/login', component: () => import('@/views/login/Login.vue') }, // 登录页

]

// 创建路由实例对象
const router = new VueRouter({
    mode: "history",
    routes: routes
})

// 设置路由全局前置守卫
import { getCookie } from '@/utils/cookie.js'
router.beforeEach((to, from, next) => {
    // 获取token 
    let token = getCookie('token')
    // next()
    // console.log(token);
    if (token) {
        // 已经登录过了
        // 请求左侧菜单栏接口数据
        if (to.path == '/login') {
            // 当手动修改url 跳转到登录页时，此时token 存在，直接跳回到首页
            next('/')
        } else {
            let role = localStorage.getItem('role')
            if (store.state.routes.length == 0) {
                pressApi({ role: role }).then(res => {
                    res.data.forEach(item => {
                        item.component = () => import(`@/views/layout/vaction/${item.name}.vue`)
                        routes[1].children.push(item)
                    })

                    console.log(router);
                    // 解决新增的路由菜单点击出现白屏问题，因为new VueRouter()之前已经执行过了，
                    // 此步骤相当于重新new VueRouter(更新后的routes) 相当于发糖
                    router.addRoutes(routes)

                    // 将请求后的跟新完的routes 存到vuex 中，然后方便首页左侧aisde组件左侧菜单展示
                    store.dispatch('setRoutesAsync', routes)
                    // 刷新路由 防止新addRoutes(routes)的路由没有完全加载完 （即add完）导致的页面白屏问题，找不到页面问题
                    // 解决点击新增路由后，然后刷新新增页面，出现页面白屏问题
                    next({ ...to, replace: true })
                })
            } else {
                next()
            }
        }

    } else if (!token && to.path != '/login') {
        next('/login') // 跳的不是登录页 回到登录页
    } else {
        next() //没有token，就回登录页 放行
    }

})

export default router